<!--
 * @Author: your name
 * @Date: 2021-08-16 08:48:01
 * @LastEditTime: 2021-08-16 20:06:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \第四次操作事件\继续操作\netease-koala\exchange.html
-->
<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>积分兑换</title>
    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./fonts/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./css/exchange.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./bootstrap-4.5.0-dist/js/bootstrap.js"></script>
    
</head>
<body>
    <!-- 图片开头 -->
    <div id="title">
        <img src="./images/网易考拉logo.png">
        <span>积分兑换管理</span>
    </div>
    <!-- 下面整体 -->
    <div class="exchange-content">
        <!-- 左边 -->
        <div class="list-group">
            <a href="./overseaManagement.html" class="list-group-item list-group-item-action list-group-item-primary">海外直购管理</a>
            <a href="./milk powder backstage.html" class="list-group-item list-group-item-action list-group-item-secondary">品质奶粉管理</a>
            <a href="./the admin of the charge.html" class="list-group-item list-group-item-action list-group-item-primary">用户充值管理</a>
            <a href="./user.html" class="list-group-item list-group-item-action list-group-item-secondary">用户信息管理</a>
            <a href="./exchange.html" class="list-group-item list-group-item-action list-group-item-primary">积分兑换管理</a>
            <a href="./discount coupon.html" class="list-group-item list-group-item-action list-group-item-secondary">优惠券管理</a>
          </div>
          <!-- 右边 -->
    <div class="exchange-table" >
        <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">序号</th>
                <th scope="col">用户名</th>
                <th scope="col">兑换内容</th>
                <th scope="col">兑换积分</th>
                <th scope="col">兑换时间</th>
                <th scope="col">使用有效期</th>
                <th scope="col">状态</th>
                <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>a</td>
                <td>50元无门槛券</td>
                <td>50</td>
                <td>2021.8.14</td>
                <td>1个月</td>
                <td>已使用</td>
                <td>
                  <span>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal">
                     删除
                     </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                     添加
                    </button>
                    </span>
                  </td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>b</td>
                <td>5元无门槛</td>
                <td>5</td>
                <td>2021.8.15</td>
                <td>三个月</td>
                <td>未使用</td>
                <td>
                  <span>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal">
                     删除
                     </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                     添加
                    </button>
                    </span>
                  </td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>c</td>
                <td>牛奶</td>
                <td>50</td>
                <td>2021.8.16</td>
                <td>2个月</td>
                <td>已使用</td>
                <td>
                  <span>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal">
                     删除
                     </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                     添加
                    </button>
                    </span>
                  </td>
              </tr>
              <tr>
                <th scope="row">4</th>
                <td>d</td>
                <td>面包</td>
                <td>10</td>
                <td>2021.8.17</td>
                <td>6个月</td>
                <td>未使用</td>
                <td>
                  <span>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal">
                     删除
                     </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                     添加
                    </button>
                    </span>
                  </td>
              </tr>
              <tr>
                <th scope="row">5</th>
                <td>e</td>
                <td>水</td>
                <td>10</td>
                <td>2021.8.17</td>
                <td>一个月</td>
                <td>已使用</td>
                <td>
                  <span>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal">
                     删除
                     </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                     添加
                    </button>
                    </span>
                  </td>
              </tr>
              <tr>
                <th scope="row">6</th>
                <td>f</td>
                <td>5元话费</td>
                <td>20</td>
                <td>2021.8.18</td>
                <td>6个月</td>
                <td>未使用</td>
                <td>
                  <span>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal">
                     删除
                     </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                     添加
                    </button>
                    </span>
                  </td>
              </tr>
              <tr>
                <th scope="row">7</th>
                <td>g</td>
                <td>满99减10元无门槛</td>
                <td>50</td>
                <td>2021.8.19</td>
                <td>三个月</td>
                <td>未使用</td>
                <td>
                  <span>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal">
                     删除
                     </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                     添加
                    </button>
                    </span>
                  </td>
              </tr>
              <tr>
                <th scope="row">8</th>
                <td>h</td>
                <td>电风扇</td>
                <td>100</td>
                <td>2021.8.20</td>
                <td>12个月</td>
                <td>已使用</td>
                <td>
                  <span>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal">
                     删除
                     </button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
                     添加
                    </button>
                    </span>
                  </td>
              </tr>
              
            </tbody>
          </table>
          <!-- 添加 -->
<div class="modal fade" id="addModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">添加</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <!-- 模态框里面内容 -->
      <div class="modal-body">
        <form>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" type="button" id="button-addon1">序号</button>
            </div>
            <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" type="button" id="button-addon1">兑换内容</button>
            </div>
            <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" type="button" id="button-addon1">兑换积分</button>
            </div>
            <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" type="button" id="button-addon1">兑换状态</button>
            </div>
            <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">保存</button>
      </div>
    </div>
  </div>
</div>
<!-- 删除 -->
<div class="modal fade" id="deleteModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">删除</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
<!-- 删除模态框内容 -->
      <div class="modal-body">
        确认删除这一行内容吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">是的</button>
      </div>
    </div>
  </div>
</div>
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">1</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>
    
</body>
</html>